<template>
    <div class="login">
        <div class="content">
            <div class="top">
                <h5>用户登录</h5>
                <el-form ref="loginForm" :model="loginForm" :rules="rules">
                    <el-form-item prop="userName">
                        <el-input v-model="loginForm.userName" prefix-icon="el-icon-user" placeholder="用户名/邮箱/手机号" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="密码" />
                    </el-form-item>
                </el-form>
                <el-button type="warning" @click="submitForm">登录</el-button>
                <p>前往注册</p>
            </div>
            <div class="bottom">
                <p>铁路12306每日服务时间详见<span @click="open=true">《铁路互联网购票须知》</span>。</p>
            </div>
        </div>
        <el-dialog title="铁路互联网购票须知" :visible.sync="open" width="500px" append-to-body>
            <div>
                <p>《铁路互联网购票须知》</p>
                <p>《铁路互联网购票须知》</p>
                <p>《铁路互联网购票须知》</p>
                <p>《铁路互联网购票须知》</p>
                <p>《铁路互联网购票须知》</p>
                <p>《铁路互联网购票须知》</p>
                <p>《铁路互联网购票须知》</p>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return {
            loginForm:{
                userName:null,
                password:null,
            },
            rules:{
                userName: [
                    { required: true, message: "请输入用户名/邮箱/手机号", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ],
            },
            open:false
        }
    },
    methods:{
        /** 提交按钮 */
        submitForm() {
            this.$refs["loginForm"].validate(valid => {
                if (valid) {
                    // 此处调取接口
                }
            });
        },
    }
}
</script>

<style scoped>
.login{
    width: 100%;
    height: 600px;
    background: url('./../../assets/background.jpg') no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.login .content{
    width: 350px;
    margin-right: 100px;
    background: white;
    
}
.login .content .top{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 30px;
}
.login .content .top h5{
    font-size: 20px;
    font-weight: 400;
    margin: 20px 0;
}
.login .content .top p{
    font-size: 14px;
    color: #409EFF;
    cursor: pointer;
}
.login .content .bottom{
    display: flex;
    justify-content: center;
    border-top: 1px solid #e3e3e3;
}
.login .content .bottom p{
    font-size: 12px;
    color: #999;
    margin: 10px 0;
}
.login .content .bottom span{
    color: #409EFF;
    cursor: pointer;
}
</style>
